<template>
  <div>
      <h2 align="center">登录页面</h2>
      <table class="table table-borderd">
          <tr>
            <td align="right">用户名:</td>
            <td><input type="text" v-model="state.userName"/></td>
          </tr>
          <tr>
            <td align="right">密码：</td>
            <td><input type="password" v-model="state.userPwd"/></td>
          </tr>
          <tr>
            <td></td>
            <td><input @click="login" type="button" value="登录" class="btn btn-success"/></td>
          </tr>
      </table>
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue'
import axios from 'axios';
import { useUserStore} from '../../store/user'
import { useRouter} from 'vue-router'
//创建路由器
const router = useRouter();
//创建store对象
const userStore = useUserStore();
//数据-------------------------
let data = reactive({
  state:{
    userName:'',
    userPwd:''
  }
})

let {state} = toRefs(data)


//函数--------------------------------
//登录
// function login(){

// }

const login = ()=>{

  //思路：用户名和密码到数据库验证是否存在，如果存在，再判断是否完善过用户信息，如果
  //完善过。直接跳转到主页面，没有完善用户信息，跳转到用户信息页面完善用户信息
  //用户不存在，跳转到注册页面，注册用户，注册完再跳转到登录页面进行登录,跳用户完善信息页面
  //1.判断用户名和密码非空


  if(state.value.userName == ""){
    alert("用户名不能为空");
    return;
  }
  if(state.value.userPwd == ""){
    alert("密码不能为空");
    return
  }
  //2.发送网络请求到后端验证
  axios({
    url:'/api/Users/GetUserLogin',//后端的接口地址
    method:'get',//请求的方法（get  post...）
    params:state.value //如果是post,写data，如果是get请求写params  向后端传递的参数
  })
  .then(res=>{
    //成功之后的响应结果res
    console.log(res);
    if(res.data.data == null){
      //用户不存在跳注册页面
      router.push('/register');
    }else{
      //1、存在，判断是否完善过用户信息
      //2、用户信息存储到公共的地方---pinia
      //到用户详情表根据用户ID查询这个用是否存在
      userStore.userInfo = res.data.data
      axios({
        url:'/api/Users/GetSearchUserInfo',
        method:'get',
        params:{
          uId:res.data.data.U_Id
        }
      })
      .then(result=>{
          //请求成功后的结果 result
          console.log(result);
          if(result.data.data > 0){
            //完善过 跳到主页面
            router.push("/main")
          }else{
            //没有完善过，往用户详情页面跳 并且把用户ID带过去  路由传参
            router.push({
              path:'/userInfo',
              query:{
                id:res.data.data.U_Id
              }
            })
          }
          
      })
      .catch(err=>{
        //请求失败之后的错误信息
      })
    }
  })
  .catch(err=>{
    //请求失败之后的错误结果err
    console.log(err);
    
  })
}
</script>

<style scoped>

</style>